<template>
  <el-dialog :title="'选择家庭组'" :close-on-click-modal="false" :visible.sync="visible" append-to-body>
    <el-button class="miui-dialog-close-btn" @click="visible = false">关闭页面</el-button>
    <div class="text item">
      <basic-container>
        <el-form :inline="true" v-show="searchShow" ref="searchForm" :model="dataForm" @keyup.enter.native="searchChange()">
          <el-form-item label="家庭组名称" prop="familyGroupName">
            <el-input v-model="dataForm.familyGroupName" placeholder="家庭组名称"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="searchChange">查询</el-button>
            <el-button type="default" icon="el-icon-delete" @click="searchReset">清空</el-button>
          </el-form-item>
        </el-form>
        <el-row>
          <el-col :span="24">
            <el-button icon="el-icon-search" circle @click="handleSearchShow" style="float: right"></el-button>
            <el-button icon="el-icon-refresh" circle @click="refreshChange" style="float: right"></el-button>
            <!-- <el-button icon="el-icon-menu" circle style="float:right;"></el-button>-->
          </el-col>
        </el-row>
        <div class="avue-crud">
          <el-table :data="dataList" ref="goodsTable" border v-loading="dataListLoading" highlight-current-row>
            <el-table-column type="index" width="50">
              <template slot-scope="scope">
                <el-radio v-model="dataForm.id" :label="scope.row.id" style="position: relative; left: 6px; top: -2px" @change="checkFamily(scope.row)">&nbsp;</el-radio>
              </template>
            </el-table-column>
            <el-table-column prop="familyGroupName" label="家庭组名称"></el-table-column>
            <el-table-column prop="createUser" label="创建人"></el-table-column>
            <el-table-column prop="createTime" label="创建时间"></el-table-column>
            <el-table-column prop="updateUser" label="修改人"></el-table-column>
            <el-table-column prop="updateName" label="修改时间"></el-table-column>
          </el-table>
        </div>

        <div class="avue-crud__pagination">
          <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" background layout="total, sizes, prev, pager, next">
          </el-pagination>
        </div>
        <!-- 弹窗, 新增 / 修改 -->
        <table-form v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></table-form>
      </basic-container>
    </div>
  </el-dialog>
</template>

<script>
  import { mapGetters } from "vuex"
  import { filterParams } from "@/util/tools"
  import { getObj } from "@/api/admin/dept"
  import { fetchList, delObj } from "@/api/eims/familygroup"
  
  import TableForm from "./familygroup-form"
  
  export default {
    data() {
      return {
        visible: false,
        dataForm: {
          key: "",
        },
        dataList: [],
        searchShow: true,
        pageIndex: 1,
        pageSize: 100,
        totalPage: 0,
        dataListLoading: false,
        addOrUpdateVisible: false,
      };
    },
    components: {
      TableForm,
    },
    computed: {
      ...mapGetters(["permissions", "userInfo"]),
    },
    methods: {
      init(data) {
        this.dataForm.id = data.id || 0
        this.dataForm.customerId = data.customerId || 0
        this.visible = true
        this.dataList = []
        getObj(this.userInfo.lessDeptId).then(response => {
          if(response.data.code == '0'){
            this.dataForm.unitId = response.data.data.unitId
            this.dataForm.showUnitFlag = 2
            this.searchChange()
          }else{
            this.$message.error(response.data.msg)
          } 
        })
      },
      // 获取数据列表
      getDataList() {
        this.dataListLoading = true
        let params1 = filterParams(this.dataForm)
        let params2 = {
          current: this.pageIndex,
          size: this.pageSize
        }
        fetchList(Object.assign(params2, params1)).then(response => {
          if(response.data.code == '0'){
            this.dataList = response.data.data.records
            this.totalPage = response.data.data.total
            this.$nextTick(() => {
              for (let i = 0; i < this.dataList.length; i++) {
                if (this.dataList[i].id == this.dataForm.id) {
                  this.$refs.goodsTable.setCurrentRow(this.dataList[i])
                }
              }
            })
          }else{
            this.$message.error(response.data.msg)
          }
          this.dataListLoading = false
        })
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val
        this.getDataList()
      },
      searchChange() {
        this.pageIndex = 1
        this.getDataList()
      },
      // 搜索清空
      searchReset() {
        this.$refs.searchForm.resetFields()
        this.getDataList(this.page)
      },
      handleSearchShow() {
        this.searchShow = !this.searchShow
      },
      /**
       * 刷新回调
       */
      refreshChange() {
        this.getDataList(this.page)
      },
      // 选择家庭组
      checkFamily(val) {
        this.visible = false
        val.customerId = this.dataForm.customerId
        this.$emit("refreshData", val)
      },
    },
  }
</script>
